<template>
  <div>
    <div align="center">
      <h1>宠物百科</h1>
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="小型犬" name="1"></el-tab-pane>
        <el-tab-pane label="中型犬" name="2"></el-tab-pane>
        <el-tab-pane label="大型犬" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="犬种" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="别名" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.alias_name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="原产地" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.source_area }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.price }}元</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="寿命" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.life }}年</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="详情查看">
          <template slot-scope="scope">
            <el-button type="text" @click="open(scope.row.describe)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
       <!-- 点击查看详情的弹出框 -->
    <el-dialog title="犬种详情" :visible.sync="dialogVisible" width="40%">  
      <div>
        <p>{{describe}}</p>
      </div> 
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">
          确 定
        </el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data() {
    return {
      activeName: "1",
      size: "",
      tableData: [],

      describe:"",

      dialogVisible:false,
    };
  },
  methods: {

    //打开弹出框
    open(decrible){
      this.describe = decrible;
      this.dialogVisible =true;
    },
    //关闭弹出框
    submit(){
      this.dialogVisible = false
    },
    find() {
      this.size = 1;
      axios
        .get(
          commons.baseUrl +
            "user/convenient/getAllDogBreedBySize?size=" +
            this.size
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        });
    },
    //点击事件
    handleClick(tab, event) {
      console.log(tab);
      //说明点击的是小型犬
      if (tab.index == 0) {

         axios
        .get(
          commons.baseUrl +
            "user/convenient/getAllDogBreedBySize?size=" +
            this.size
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        });
      }
      //说明点击的是中型犬
      if (tab.index == 1) {
        this.size = 2;

        axios
          .get(
            commons.baseUrl +
              "user/convenient/getAllDogBreedBySize?size=" +
              this.size
          )
          .then((res) => {
            console.log(res);
            this.tableData = res.data.data;
          });
      }
      //说明点击的是大型犬
      if (tab.index == 2) {
        this.size = 3;

        axios
          .get(
            commons.baseUrl +
              "user/convenient/getAllDogBreedBySize?size=" +
              this.size
          )
          .then((res) => {
            console.log(res);
            this.tableData = res.data.data;
          });
      }
    },
  },
  mounted() {
    this.find();
    this.handleClick;
  },
  computed: {},
};
</script>
<style scoped></style>
